<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">最近订单</h2>
      <button class="text-primary text-sm hover:underline" @click="viewAllOrders">查看全部</button>
    </div>
    <div class="divide-y divide-gray-100">
      <div class="p-3 hover:bg-gray-50 transition-colors" v-for="(order, index) in taskList" :key="index">
        <div class="flex justify-between items-start">
          <div>
            <div class="font-medium">{{ order.taskName }}</div>
            <div class="text-sm text-gray-500 mt-0.5">订单号: {{ order.taskName }}</div>
          </div>
          <div class="text-right">
            <div class="font-medium">{{ order.budget + order.budgetType }}</div>
            <!-- <span class="inline-block px-2 text-xs"> -->
              <dict-tag :options="dict.type.order_status" :value="order.status" size="mini"/>
            <!-- </span> -->
          </div>
        </div>
        <div class="flex justify-between items-center mt-2 text-sm text-gray-500">
          <span>{{ order.startTime }}开始</span>
          <a href="#" class="text-primary hover:underline" @click.prevent="viewOrderDetails(order.orderNumber)">详情</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { listOrderTask } from "@/api/demo/order";

export default {
  dicts: ['priority', 'sys_yes_no', 'order_status', 'accept_status'],
  data() {
    return {
      taskList: [
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // listOrderTask({ userType: this.$store.getters.userType }).then(response => {
      //   this.taskList = response.rows;
      // });
    },
    viewAllOrders() {
      // 查看全部订单逻辑
      console.log('查看全部订单');
      this.$router.push("/order")
    },
    viewOrderDetails(orderNumber) {
      // 查看订单详情逻辑
      console.log('查看订单详情:', orderNumber);
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.divide-y {
  border-top: 1px solid #f3f4f6;
}

.divide-gray-100>div:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}

.transition-colors {
  transition: background-color 0.2s ease;
}
</style>